<template>
  <el-card class="mb-4">
    <aside class="flex items-center mb-4">
      <span class="font-bold"> 类型： &nbsp;</span>
      <el-link
        v-for="category in categoryList"
        :key="category._id"
        class="mr-2"
        :class="{
          active: category._id == $route.params.categoryId,
        }"
        @click.native="changeCategory(category._id)"
        >{{ category.name }}</el-link
      >
    </aside>
    <CarRentalSearch />
  </el-card>
</template>

<script>
  export default {
    name: 'CarRentalSelect',
    props: ['getTypeList'],
    data() {
      return {}
    },
    computed: {
      ...mapState('category', ['categoryList']),
    },
    mounted() {
      this.getCategory()
    },
    methods: {
      ...mapActions('category', ['getCategory']),
      changeCategory(categoryId) {
        this.$router.push({
          name: 'car-rental',
          params: {
            categoryId,
          },
        })
        this.getTypeList(categoryId)
      },
    },
  }
</script>

<style scoped>
  ::v-deep .active {
    color: var(--color-primary);
  }

  .active.el-link.is-underline:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    bottom: 0;
    border-bottom: 1px solid var(--color-primary);
  }
</style>
